<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			#app {
				background-color: #2d3a4b;
				color: #fff;
				font-size: 170px;
				font-weight: bold;
				width: 100vw;
				height: 100vh;
				line-height: 80vh;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
		A
		C
		B
	</body>
	<script>
		setInterval(() => {
			const nowDate = new Date();
			document.querySelector("#app").innerHTML = [
				nowDate.getHours(),
				buling(nowDate.getMinutes()),
				buling(nowDate.getSeconds()),
			].join(":");
		}, 1000);

		function buling(val) {
			if (val < 10) {
				return "0" + val;
			} else {
				return val;
			}
		}

		function launchFullScreen(element) {
			if (element.requestFullscreen) {
				element.requestFullscreen();
			} else if (element.mozRequestFullScreen) {
				element.mozRequestFullScreen();
			} else if (element.webkitRequestFullscreen) {
				element.webkitRequestFullscreen();
			} else if (element.msRequestFullscreen) {
				element.msRequestFullscreen();
			}
		}
		document.body.onclick = () => {
			launchFullScreen(document.documentElement); // 整个网页
		};
	</script>
</html>
